﻿@page "/gantt-chart/filtering"

@using Syncfusion.Blazor.Gantt
@using ej2_blazor_filterdata

@inherits SampleBaseComponent;

<SampleDescription>
    <p>The filtering feature enables the user to view reduced amount of records based on filter criteria. It can be enabled by setting AllowFiltering to true</p>
</SampleDescription>
<ActionDescription>
    <p>
        The column menu filtering can be enabled by setting <code>AllowFiltering</code> property as <code>true</code> and toolbar search box can be enabled by including the search item in the <code>Toolbar</code> property. Gantt Chart also provides support for a set of filtering modes with <code>HierarchyMode</code> property. The below are the type of filter mode available in Gantt Chart.
        <li><code> Parent </code> - This is the default filter hierarchy mode in Gantt Chart. The filtered records are displayed with its parent records, if the filtered records not have any parent record then the filtered record alone will be displayed.</li>
        <li><code> Child </code> - The filtered records are displayed with its child record, if the filtered records do not have any child record then only the filtered records are displayed.</li>
        <li><code> Both </code> - The filtered records are displayed with its both parent and child record. If the filtered records do not have any parent and child record then only the filtered records are displayed.</li>
        <li><code> None </code> - Only the filtered records are displayed.</li>
    </p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">
            <SfGantt DataSource="@TaskCollection" Height="450px" Width="100%" HighlightWeekends="true"
                     TreeColumnIndex="1" AllowFiltering="true"
                     ProjectStartDate="@ProjectStart" ProjectEndDate="@ProjectEnd"
                     AllowSorting="true">
                <GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" EndDate="EndDate"
                                 Duration="Duration" ParentID="ParentId" Dependency="Predecessor"></GanttTaskFields>
                <GanttColumns>
                    <GanttColumn Field="TaskId" HeaderText="Task Id" Width="150"></GanttColumn>
                    <GanttColumn Field="TaskName" HeaderText="Service Name" Width="250"></GanttColumn>
                    <GanttColumn Field="StartDate" HeaderText="Start time"></GanttColumn>
                    <GanttColumn Field="Duration" HeaderText="Duration"></GanttColumn>
                    <GanttColumn Field="EndDate" HeaderText="End time"></GanttColumn>
                </GanttColumns>
                <GanttFilterSettings HierarchyMode="FilterHierarchyMode.Both"></GanttFilterSettings>
                <GanttSplitterSettings Position="30%"> </GanttSplitterSettings>
                <GanttLabelSettings LeftLabel="TaskName" TValue="FilterData.TaskData"></GanttLabelSettings>
            </SfGantt>
        </div>
    </div>
</div>

@code{
    public DateTime ProjectStart = new DateTime(2019, 3, 24);
    public DateTime ProjectEnd = new DateTime(2019, 7, 6);
    public List<FilterData.TaskData> TaskCollection { get; set; }

    protected override void OnInitialized()
    {
        this.TaskCollection = FilterData.GetTaskCollection();
    }
}